<template>
  <div id="detail">
    <Filters
      block
      :form="searchForm"
      :filterData="filterData"
      @confirm="changePage(1)"
    />
    <div class="container">
      <div class="tip">{{tip}}</div>
      <DataTable
        rowKey="orderId"
        :tableData="Data"
        :btns="btns"
        :tableColumn="tableColumn"
        :pageConfig="pageConfig"
        @refresh="getList"
      />
    </div>
  </div>
</template>
<script lang='ts'>
import { Confirm } from '@/decorator';
import { Component, Watch, Vue } from 'vue-property-decorator';
import { ANALYSIS_EXPORTDETAILANALYSIS } from '@/api/global'

@Component
export default class Detail extends Vue {
  searchForm: any = {
    date: [],
    id: undefined,
    word: ''
  }
  optionList: any[] = []
  get filterData () {
    return {
      date: {
        label: '日期',
        type: 'daterange',
        template: {
          clearable: true
        }
      },
      id: {
        label: '组织',
        type: 'select',
        width: 300,
        template: {
          placeholder: '请选择组织',
          clearable: true,
          filterable: true,
          options: this.optionList
        }
      },
      word: {
        label: '组织名称',
        type: 'input',
        template: {
          placeholder: '请输入组织名称',
          clearable: true
        }
      }
    }
  }
  Data: any[] = [];
  tableColumn: any = {
    organizationName: {
      label: '组织',
      width: 120
    },
    projectName: {
      label: '项目名称',
      width: 120
    },
    orderSn: {
      label: '订单编号',
      width: 100
    },
    orderCount: {
      label: '订单量',
      width: 100
    },
    sendCount: {
      label: '送货量',
      width: 100
    },
    checkCount: {
      label: '验收量',
      width: 100
    }
  };
  pageConfig: any = {
    current: 1,
    total: 10,
    pageSize: 10,
    onChange: this.changePage
  };

  get btns () {
    return [
      {
        label: '导出',
        icon: 'export',
        callback: () =>
          this.$util.exportExcelFun(this.getSearchForm, ANALYSIS_EXPORTDETAILANALYSIS)
      }
    ]
  }
  materialsNum: string = ''

  get tip () {
    let { materialsNum, materialsName, spec, modelType, detailType } = this.$route.query
    return `${materialsName}${spec}${modelType}的${detailType}`
  }


  get getSearchForm () {
    let { date } = this.searchForm
    let { current: page, pageSize: size } = this.pageConfig
    let [startTime, endTime] = date
    return {
      ...this.searchForm,
      date: undefined,
      startTime,
      endTime,
      page,
      size,
      materialsNum: this.materialsNum
    }
  }

  init () {
    let { materialsNum } = this.$route.query
    this.materialsNum = materialsNum as string
    this.getOrganizationList()
    this.getList();
  }
  getOrganizationList () {
    this.$api.analysisOrganizationListFetch().then(({ data }: any) => {
      this.optionList = data.map((item: any) => ({ label: item.name, value: item.id }))
    })
  }
  getList () {
    let data = {
      ...this.getSearchForm,
      page: this.pageConfig.current,
      size: this.pageConfig.pageSize
    };
    this.$api.analysisDetailFetch(data).then((res: any) => {
      this.Data = res.data.records;
      this.pageConfig.total = res.data.total;
      if (!this.Data.length && this.pageConfig.current > 1) {
        --this.pageConfig.current;
        this.getList();
      }
    });
  }
  changePage (val: number) {
    this.pageConfig.current = val;
    this.getList();
  }
}
</script>
<style lang='scss' scoped>
#detail {
  .tip {
    font-weight: 600;
    color: #000;
    font-size: 14px;
    margin-bottom: 10px;
  }
}
</style>
